<template>
  <button class="ins-btn" :class="styleList" @click="_handler">
    {{ btnText }}
  </button>
</template>

<script >

export default {
  props: {
    btnText: String,
    handler: Function,
    optionName: String
  },
  data () {
    return {

    }
  },
  methods: {
    _handler () {
      this.handler([this.optionName, this.btnText])
      this.$store.commit({ type: 'switchTheme', theme: this.btnText })
      localStorage.setItem('theme', this.$store.state.theme)
      console.log(this.$store.state.theme)
      console.log('this.theme' + this.theme)
    }
  },
  computed: {
    theme () {
      return this.$store.state.theme
    },
    isLight () {
      return this.theme === 'light'
    },
    isDark () {
      return this.theme === 'dark'
    },
    styleList () {
      return {
        'light-settings': this.isLight, 'dark-settings': this.isDark
      }
    }
  }

}
</script>

<style lang="scss" scoped>
@import "@/theme";
.ins-btn {
  text-decoration: none;
  padding: 0 12px 0 0;
  outline: none;
  border: none;
  // background: #f5f5f5;
  cursor: pointer;
  font-size: 17px;
}

.bigTxt {
  font-size: 24px;
}

.checked {
  text-decoration: underline;
  font-weight: 700;
}
</style>
